<template>
	<view class="header">
		<image style="width: 100vw; height:760rpx;" src="../../../static/img/my/background.png" />
		<view class="h5">
			<view class="photo">
				<image class="image" src="../../../static/img/my/example.svg" alt="" />
				<text class="nickname text">{{ userInfo.nickname }}</text>
			</view>
			<view class="collect_info">
				<view  class='view' @click="goCollect">
					<view class='view' >{{ getCollectionNum }}</view>
					<view class='view' >我的收藏</view>
				</view>
				<view class='view'  @click="goViewed">
					<view class='view' >{{ getViewedNum }}</view>
					<view class='view' >我的足迹</view>
				</view>
			</view>

			<view class="feature_bar">
				<view class="feature" @click="pay">
					<image class='image'  src="../../../static/img/my/pay.svg" alt="" />
					<text class='text' >待付款</text>
				</view>
				<view class="feature" @click="receive">
					<image  class='image' src="../../../static/img/my/receive.svg" alt="" />
					<text class='text' >待收货</text>
				</view>
				<view class="feature" @click="complete">
					<image class='image'  src="../../../static/img/my/complete.svg" alt="" />
					<text class='text' >已完成</text>
				</view>
				<view class="feature" @click="cancel">
					<image class='image'  src="../../../static/img/my/cancel.svg" alt="" />
					<text class='text' >已取消</text>
				</view>
				<view class="feature" @click="orders">
					<image class='image'  src="../../../static/img/my/orders.svg" alt="" />
					<text class='text' >全部订单</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";

	export default {
		name: "MyHeader",
		data() {
			return {};
		},
		computed: {
			...mapGetters(["getCollectionNum", "getViewedNum", "userInfo"]),
			shop_count() {
				return 0;
			},
		},
		methods: {
			goCollect() {
				uni.navigateTo({
					url: "/pages/my/childCpn/MyCollect"
				})
			},
			goViewed() {
				uni.navigateTo({
					url: "/pages/my/childCpn/MyViewed"
				})
			},
			pay() {
				uni.navigateTo({
					url: "/pages/my/order/MyOrder?tag=1"
				})

			},
			receive() {
				console.log('receive');
				// $router.push('/my/order/2')
				uni.navigateTo({
					url: "/pages/my/order/MyOrder?tag=2"
				})
			},
			complete() {
				console.log('complete');
				// $router.push('/my/order/3')
				uni.navigateTo({
					url: "/pages/my/order/MyOrder?tag=3"
				})
			},
			cancel() {
				console.log('cancel');
				// $router.push('/my/order/4')
				uni.navigateTo({
					url: "/pages/my/order/MyOrder?tag=4"
				})
			},
			orders() {
				console.log('orders');
				// $router.push('/my/order/0')
				uni.navigateTo({
					url: "/pages/my/order/MyOrder?tag=0"
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	.header {
		/* #ifdef H5 || APP*/
		background: url("@/static/img/my/background.png") no-repeat center;
		/* #endif */
		
		background-size: 100% 100%;
		flex-direction: column;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		position: relative;
		margin-bottom: 200rpx;
		position: relative;
	}

	.photo {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.photo > .image {
		width: 160rpx;
		height: 160rpx;
	}

	.collect_info {
		/* #ifdef H5 || APP*/
		height: 160rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 130rpx;
		/* #endif */
		display: flex;
		width: 100vw;
		justify-content: space-around;
		align-items: center;
		color: white;
	}

	.collect_info > .view {

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
	}

	.collect_info > .view > .view:nth-child(1) {
		font-weight: 600;
	}

	.nickname {
		margin-top: 20rpx;
		text-align: center;
		color: white;
		font-size: 1.2rem;
		font-weight: 600;
	}

	.feature_bar {
		display: none;
		bottom: -140rpx;
		width: 100vw;
		position: absolute;
		background-color: white;
		border-radius: 30rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 2rpx solid rgb(224, 224, 224);
	}

	.feature {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100rpx;
		font-size: 0.9rem;
		/* #ifdef H5 */
		gap: 10rpx;
		/* #endif */
	}

	.feature > .image {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.text {
		display: block;
	}

	.image {
		height: 56rpx;
		width: 56rpx;
	}

	// /* #ifdef MP */
	.h5 {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		padding: 20rpx 0 0 0;
		box-sizing: border-box;
	}

	// /* #endif */
</style>
